
.add-friends-modal-div{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 100;
    top: 0px;
    display: none;
}
.add-friends-modal{
    position: relative;
    width: 550px;
    max-height: 330px;
    background-color: white;
    top: 15vh;
    border-radius: 20px;
    text-align: center;
    padding: 20px 20px;
    margin: 0 auto;

    /*position: absolute;*/
    /*!*top: 100px;*!*/
    /*left: 0;*/
    /*right: 0;*/
    /*margin: auto;*/
    /*top: 0;*/
    /*bottom: 0;*/

}
.add-friends-modal > h4{
    padding-bottom: 10px;
}
.find-friends-result-div{
    margin-top: 20px;
    width: 100%;
    height: 200px;
    max-height: 200px;
    overflow-y: auto;
    background-color: #F7F7F7;
    padding: 10px;
}
.find-friends-item{
    background-color: #4cae4c;
    width: 220px;
    height: 70px;
    position: relative;
    margin: 10px;
    float: left;

}
.find-friends-head{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.friends-nickname-and-username{
    position: absolute;
    top: 0px;
    left: 80px;
    max-width: 130px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 1.4rem;

}
.friends-address{
    position: absolute;
    top: 20px;
    left: 80px;
    max-width: 130px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 1.4rem;
}
.friends-add-btn-send{
    position: absolute;
    top: 40px;
    left: 80px;
}
.friends-add-btn-send > button{
    font-size: 1.2rem;
    padding: 5px;
    background-color: #0188FB;
    color: #FFFFFF;
    border: none;
}
.remove-add-friends-modal-btn{
    position: absolute;
    top: 10px;
    right: 20px;
    width: 35px;
    height: 35px;
 }

/*====================================================================================*/

/*分组管理模态*/

.groups_modal_div{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 100;
    top: 0px;
    display: none;
}
.groups-modal{
    position: relative;
    width: 300px;
    height: 480px;
    background-color: RGB(240,236,236);
    top: 10vh;
    border-radius: 20px;
    text-align: center;
    padding: 20px 10px;
    margin: 0 auto;
    cursor: pointer;
}
.groups_modal_groups_list{
    margin-top: 20px;
    width: 100%;
    height: 400px;
    /*max-height: 400px;*/
    overflow-y: auto;
    background-color: #F7F7F7;
    padding: 3px 10px;
    text-align: left;
}
.add_group_btn{
    border-bottom: 1px solid grey;
}
.my_icon{
    width: 30px;
    height: 30px;
    margin-right: 10px;
    transition:all 0.5s;
}
.my_icon:hover{
    transform: scale(1.2,1.2);
}
.not_group_icon:hover{
    transform: none;
}
.group_rename_div{
    display: inline-block;
}

/*确定图标*/
.ok_group_icon{
    display: none;
    /*z-index: 100;*/
}

.groups_modal_groups_list > li{
    padding: 5px 0px;
    border-bottom: 1px solid grey;
}
.group_input_rename{
    border: 0;
    background-color: #F7F7F7;
    padding: 5px 5px;
}
.new_group_input{
    border: 1px solid RGB(16,222,224);
    background-color: #F7F7F7;
    padding: 5px 5px;
}

/*删除分组确认框*/
.del_group_tip{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
    top: 0px;
    left: 0px;
    border-radius: 20px;
    display: none;
}
.del_group_tip_div{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #F7F7F7;
    height: 100px;
    width: 100%;
    border-radius: 20px;
}

/*关闭模态框*/
.remove_groups_modal_div_btn{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
}



/*=======================================================================================*/

/*个人信息模态框*/
.userinfo-modal-div{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 100;
    top: 0px;
    display: none;
    overflow-y: auto;
}
.userinfo-modal{
    position: relative;
    width: 700px;
    height: 480px;
    background-color: RGB(240,236,236);
    top: 10vh;
    border-radius: 20px;
    text-align: center;
    padding: 20px 20px;
    margin: 0 auto;
    cursor: pointer;
    /*position: absolute;*/
    /*!*top: 100px;*!*/
    /*left: 0;*/
    /*right: 0;*/
    /*margin: auto;*/
    /*top: 0;*/
    /*bottom: 0;*/
}
.deal_tip{
    color: red;
    font-weight: bold;
}
.remove-userinfo-modal-btn{
    position: absolute;
    top: 5px;
    right: 20px;
    z-index: 100;
    width: 35px;
    height: 35px;
}
.left_div_custom{
    width: 330px;
    height: 420px;
    /*background-color: red;*/
    position: absolute;
    left: 20px;
    top: 40px;
    word-wrap: break-word
}
.right_div_custom{
    width: 330px;
    height: 420px;
    /*background-color: #0C98B6;*/
    position: absolute;
    right: 20px;
    top: 40px;
    padding: 20px;
    text-align: left;
}

.nickname_motto_div{
    padding: 10px;
    /*color: #0C98B6;*/

}
.nickname_motto_div>h5{
    padding-top: 5px;
}
.userinfo_nickname_div{
    font-size: 2.2rem;
}
.userinfo_div_input{
    background: rgba(255,255,255,0);
    border: 1px solid rgba(0,0,0,0);

}
.userinfo_center{
    text-align: center;
}

.right_div_custom > h5{
    padding-bottom: 15px;
}
.right_div_custom .gender_select{
    /*border: 1px solid black;*/
    border-radius: 5px;
}
.userinfo_age_input{
    width: 60px;
}

/*==============================================================================*/


.apply_div{
    position: absolute;
    width: 93%;
    height: 200px;
    /*background-color: red;*/
    bottom:20px;
    left: 20px;
    padding: 10px 20px 10px 20px;
    text-align: center;
    display: none;
    background-color: #F7F7F7;
}
.apply_div_rela{
    position: relative;
}
.apply_message{
    position: absolute;
    right: 20px;
    top: 30px;
    width: 225px;
}

.friend_application_reply_div_modal{
    width: 100%;
    height: 555px;
    background-color: rgba(0,0,0,0.3);
    display: none;
    z-index: 100;
    border-radius: 20px;
    position: absolute;
    top:50px;
    left: 0px;
}

/*好友申请回复*/
.friend_application_reply_div{
    width: 350px;
    height:200px;
    /*background-color: #F7F7F7;*/
    background: url("../img/Starry.jpg") center;
    position: absolute;
    top: 150px;
    left: 190px;
    border-radius: 20px;
    text-align: center;
    z-index: 100;
    /*display: none;*/
}

.refuse_friend_application_reply_modal{
    width: 100%;
    height: 555px;
    background-color: rgba(0,0,0,0.3);
    display: none;
    z-index: 100;
    border-radius: 20px;
    position: absolute;
    top:50px;
    left: 0px;
}

.refuse_friend_application_reply_div{
    width: 350px;
    height:200px;
    /*background-color: #F7F7F7;*/
    background: url("../img/Starry.jpg") center;
    position: absolute;
    top: 150px;
    left: 190px;
    border-radius: 20px;
    text-align: center;
    z-index: 100;
    /*display: none;*/
}
.refuse_apply_message{
    width: 225px;
    margin: 20px auto 0px;

}

.friend_online_offline_advice{
    position: absolute;
    right: 0px;
    top: 5px;
    padding: 5px;
    border-radius: 10px;
    background-color: white;
    display: none;
}
/*=====================================================*/
/*删除好友确认模态框*/

.is_del_friend_modal_div{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 100;
    top: 0px;
    display: none;
}
.is_del_friend_modal{
    position: relative;
    width: 400px;
    height: 200px;
    background-color: RGB(240,236,236);
    top: 10vh;
    border-radius: 20px;
    text-align: center;
    padding: 20px 10px;
    margin: 0 auto;
    cursor: pointer;
}

/*==================================================================================*/

/*头像上传模态框*/
.head_portrait_modal_div{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    z-index: 110;
    top: 0px;
    display: none;
    overflow-y: auto;
}
